<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <!--加载播放器JS-->
    <script src="./jessibuca.js"></script>
    <style>
        .root {
            display: flex;
            place-content: center;
            margin-top: 2rem;
        }

        .container-shell {
            backdrop-filter: blur(5px);
            background: hsla(0, 0%, 50%, 0.5);
            padding: 30px 4px 10px 4px;
            /* border: 2px solid black; */
            width: auto;
            position: relative;
            border-radius: 5px;
            box-shadow: 0 10px 20px;
        }

        .container {
            background: rgba(13, 14, 27, 0.7);
            width: 320px;
            height: 199px;
            display: inline-block;
            margin-right: 1px;
            margin-bottom: 1px;
        }

        .input {
            display: flex;
            margin-top: 10px;
            color: white;
            place-content: stretch;
        }

        .input2 {
            bottom: 0px;
        }

        .input input {
            flex: auto;
        }

        .err {
            position: absolute;
            top: 40px;
            left: 10px;
            color: red;
        }

        .option {
            position: absolute;
            top: 4px;
            right: 10px;
            display: flex;
            place-content: center;
            font-size: 12px;
        }

        .option span {
            color: white;
        }

        @media (max-width: 720px) {
            .container {
                width: 90vw;
                height: 52.7vw;
            }
        }
    </style>
</head>

<body style="background:#888888;">
    <div class="root">
        <div>
            <div>
                <div class="container" id="container1"></div>
                <div class="container" id="container2"></div>
                <div class="container" id="container3"></div>
            </div>
            <div>
                <div class="container" id="container4"></div>
                <div class="container" id="container5"></div>
                <div class="container" id="container6"></div>
            </div>
            <div>
                <div class="container" id="container7"></div>
                <div class="container" id="container8"></div>
                <div class="container" id="container9"></div>
            </div>
            <div class="input" style="width: 1000px;flex-direction: column">
            </div>
            <div class="input">
                <button id="play">播放</button>
                <button id="pause" style="display: none">停止</button>
            </div>
            <div class="input" style="line-height: 30px">
                <button id="destroy">销毁</button>
            </div>

            <div class="input">
                <div>1:</div>
                <input autocomplete="on" id="playUrl1"
                    value="rtsp://admin:hs123456@192.168.1.224:554/h264/ch1/main/av_stream" />
                <button onclick="playbtnz(1)">播放</button>
            </div>
            <div class="input">
                <div>2:</div>
                <input autocomplete="on" id="playUrl2"
                    value="rtsp://admin:hs123456@192.168.1.202:554/h264/ch34/main/av_stream" />
                <button onclick="playbtnz(2)">播放</button>
            </div>
            <div class="input">
                <div>3:</div>
                <input autocomplete="on" id="playUrl3"
                    value="rtsp://admin:hs123456@192.168.1.202:554/h264/ch36/main/av_stream" />
                <button onclick="playbtnz(3)">播放</button>
            </div>
            <div class="input">
                <div>4:</div>
                <input autocomplete="on" id="playUrl4"
                    value="rtsp://admin:hs123456@192.168.1.202:554/h264/ch35/main/av_stream" />
                <button onclick="playbtnz(4)">播放</button>
            </div>
            <div class="input">
                <div>5:</div>
                <input autocomplete="on" id="playUrl5" value="" />
            </div>
            <div class="input">
                <div>6:</div>
                <input autocomplete="on" id="playUrl6" value="" />
            </div>
            <div class="input">
                <div>7:</div>
                <input autocomplete="on" id="playUrl7" value="" />
            </div>
            <div class="input">
                <div>8:</div>
                <input autocomplete="on" id="playUrl8" value="" />
            </div>
            <div class="input">
                <div>9:</div>
                <input autocomplete="on" id="playUrl9" value="" />
            </div>

        </div>
    </div>

    <script>
        var $player = document.getElementById('play');
        var $pause = document.getElementById('pause');
        var $destroy = document.getElementById('destroy');


        var showOperateBtns = true; // 是否显示按钮
        var forceNoOffscreen = true; //
        var playList = [];
        var currentID = 0;
        // 流媒体服务IP和端口
        var hostIp;
        var hostPort = 8087;

        //http get
        function queryJson(t, e = null) {
            let s = new XMLHttpRequest();
            s.open("GET", t, true),
                s.send(""),
                e &&
                (s.onreadystatechange = () => {
                    4 == s.readyState &&
                        (200 == s.status
                            ? e(true, JSON.parse(s.responseText))
                            : e(false, s.status + "," + s.responseText));
                });
        }

        function getIdUrl(rtspurl, cb = null) {
            var hurl = `http://${hostIp}:${hostPort}/index/api/addStreamrtspz?secret=035c73f7-bb6b-4889-a715-d9eb2d1925cc&url=${rtspurl}`;
            queryJson(hurl, (t, e) => {
                if (t) {
                    if (e["code"] != undefined && e.code == 0) {
                        //请求成功了 反回WS播放地址
                        console.log("http get OK..." + e.data.wurl);
                        cb(e.data.wurl);
                    } else {
                        //
                        console.log("http get error")
                    }
                } else {
                    //
                    console.log("http get error2 ")
                }
            });

        }

        function create(id) {
            var $container = document.getElementById('container' + id);

            var jessibuca = new Jessibuca({
                container: $container,
                videoBuffer: 0.2, // 缓存时长
                isResize: false,
                text: "",
                loadingText: "加载中",
                //debug: true,
                //showBandwidth: showOperateBtns, // 显示网速
                // operateBtns: {
                //     fullscreen: showOperateBtns,
                //     screenshot: showOperateBtns,
                //     play: showOperateBtns,
                //     audio: showOperateBtns,
                // },
                forceNoOffscreen: forceNoOffscreen,
                isNotMute: false,
            },);

            jessibuca.onLog = msg => console.error(msg);
            jessibuca.onRecord = (status) => console.log('onRecord', status);
            jessibuca.onPause = () => console.log('onPause');
            jessibuca.onPlay = () => console.log('onPlay');
            jessibuca.onFullscreen = msg => console.log('onFullscreen', msg);
            jessibuca.onMute = msg => console.log('onMute', msg);
            playList.push(jessibuca);
            this.currentID = 0;
        }
        //单个按钮播放
        function playbtnz(val) {
            var tcurrent = this.currentID;
            let jeplay = playList[tcurrent];
            if (jeplay) {
                if (jeplay.isPlaying()) {
                    console.log("isPlaying ...");
                    jeplay.close();
                    jeplay.clearView();
                } else {
                    console.log("not Playing ...");
                }
                // playid
                var $playHref = document.getElementById('playUrl' + val);
                if ($playHref.value) {
                    //推流请求
                    setTimeout((url) => {
                        getIdUrl(url, (e) => {
                            console.log(e);
                            jeplay && jeplay.play(e).then(() => { }).catch((e) => { console.error(e); });
                        });
                    }, 0, $playHref.value)
                }
            }
            //窗口ID加1
            this.currentID = tcurrent < 8 ? tcurrent + 1 : 0;
            console.log(this.currentID);
            //isPlaying()  close() clearView()
        }
        function closebtn() {

        }
        //初始化播放界面  
        function initVideo() {
            for (let i = 0; i < 9; i++) {
                create(i + 1);
                $player.style.display = 'inline-block';
                $pause.style.display = 'none';
                $destroy.style.display = 'none';
            }
            hostIp = window.location.hostname;
            hostPort = window.location.port;
        }


        $player.addEventListener('click', function () {
            for (let i = 0; i < 9; i++) {
                var id = i + 1;
                var $playHref = document.getElementById('playUrl' + id);
                let player = playList[i];
                if ($playHref.value) {
                    //推流请求
                    setTimeout((url) => {
                        getIdUrl(url, (e) => {
                            console.log(e);
                            player && player.play(e).then(() => { }).catch((e) => { console.error(e); });
                        });
                        //console.log(url);                    
                    }, 0, $playHref.value)
                }
            }


            $player.style.display = 'none';
            $pause.style.display = 'inline-block';
            $destroy.style.display = 'inline-block';
        }, false)


        $pause.addEventListener('click', function () {
            $player.style.display = 'inline-block';
            $pause.style.display = 'none';
            for (let i = 0; i < 9; i++) {
                let player = playList[i];
                player && player.pause()
            }
        })

        $destroy.addEventListener('click', function () {
            for (let i = 0; i < 9; i++) {
                let player = playList[i];
                player && player.destroy()
            }
            playList = [];
            setTimeout(() => {
                for (let i = 0; i < 9; i++) {
                    create(i + 1);
                }
                $player.style.display = 'inline-block';
                $pause.style.display = 'none';
                $destroy.style.display = 'none';
            }, 100)
        })
        initVideo();
    </script>

</body>

</html>